<template>
    <div>
      <banner></banner>
      <nav id="searchBar3">
        <p v-for="(item,$index) in arr" @click="getCommodity($index)" :class="{active:$index==active}">{{item.name}}</p>
      </nav>
      <div class="supper">
        <van-swipe :autoplay="3000">
          <van-swipe-item v-for="(image, index) in supperData" :key="index">
            <img :src="image.image_url">
          </van-swipe-item>
        </van-swipe>
      </div>
      <appFooter :active="0"></appFooter>
    </div>
</template>

<script>
  import banner from '@/pages/nav/banner'
  import appFooter from '@/components/appFooter.vue'
    export default {
        name: "index",

    data () {
      return {
        navList:[],
        supperData:[],
        arr: [],
        active: 0,
      }
    },
    components: {
      banner,appFooter
    },
    created:function () {
      this.$emit('public_footer',true);
      setTitle('搜了宝网站')
    },
    mounted(){
      this.getClassification();
      this.getCarousel();
      this.toggle( this.active =0)
    },
    methods:{
      //    轮播
      async getCarousel() {
        let params={
          type:7
        };
        const res= await this.$axios.post(this.$api.queryActionNavigatio,params);
        if(res.success){
          this.supperData=res.data;
        };
      },
      //进入详情
//获取商品分类
      async getClassification() {
        let params = {

        };
        const res = await this.$axios.get(this.$api.navData, params);
        if (res.success) {
          this.navList = res.data;
        } else {
          this.$toast(res.msg);
        }
      },
      //  分类导航
      async toggle(index) {
        let params = {
          params: {
            parentId: sessionStorage.getItem("navListOne"),
            isAll: 1
          }
        };
        const res = await this.$axios.get(this.$api.commodityNav, params);
        if (res.success) {
          this.arr = res.data;
          // this.getCommodityShop()
        }else {
          this.$toast(res.msg);
        }
      },
      //点击分类
      async getCommodity (index) {
        this.active = index;
        if(index>0){
          this.commodity=[]
          this.commodityList=[]
          this.pageNum=1
        }
        if(sessionStorage.getItem("navListOne")){
          this.id=sessionStorage.getItem("navListOne")
        }else {
          this.id=sessionStorage.getItem("shopList")
        }
        if(this.arr[index].name=='全部'){
          let params = {
            id:this.id,
            pageSize:10,
            pageNum:this.pageNum,
            productName:'',
            type:this.type,
            desc:this.desc
          };
          const res = await this.$axios.post(this.$api.commodityData, params);
          if (res.success) {
            if (this.loading) {
              this.commodityList = this.commodityList.concat(res.data.list);
              this.commodity = res.data;
              this.commodity.list = this.commodityList;
              if (this.commodity.list.length >= this.commodity.total) {
                this.finished = true;
                console.log('0')
              } else {
                this.pageNum++;
                console.log('1')
              }
            } else {
              this.commodity = res.data;
              console.log('2')
              if (this.commodity.list.length >= this.commodity.total) {
                this.finished = true;
                this.text='没有了'
                console.log('3')
              }
            }
            this.isLoading = false;
            this.loading = false;
          } else {
            this.$toast(res.msg);
          }
        } else {
          let params = {
            id:this.id,
            pageSize:10,
            pageNum:this.pageNum,
            productName:this.arr[index].name,
            type:this.type,
            desc:this.desc
          };
          const res = await this.$axios.post(this.$api.commodityData, params);
          if (res.success) {
            if (this.loading) {
              this.commodityList = this.commodityList.concat(res.data.list);
              this.commodity = res.data;
              this.commodity.list = this.commodityList;
              if (this.commodity.list.length >= this.commodity.total) {
                this.finished = true;
              } else {
                this.pageNum++;
              }
            } else {
              this.commodity = res.data;
              if (this.commodity.list.length >= this.commodity.total) {
                this.finished = true;
                this.text='没有更多了'
              }
            }
            this.isLoading = false;
            this.loading = false;
          } else {
            this.$toast(res.msg);
          }
        }
      },
      onLoad(){
        // 上拉加载
        if (this.commodity.list && this.commodity.list.length > 0) {
          if (this.index == 0) {
            this.getCommodity(this.index);// 上拉触发的分页查询
          } else {
            this.getCommodity(this.index += 1);
          }
        }
      },
      //根据商品分类id跳转详情
      toLink(item){
        this.$router.push({ name:'商品列表',query:{id:item.id,name:item.name}});
      },
      toLinkFen(){
        this.$router.push({ path:'/allCategories'});
      },
    }

    }
</script>

<style scoped>
  .supper{
   margin: 0.55rem 0.1rem 0;
    height: 1rem;
    /*border-radius: 0.15rem;*/
    /*width: 96%;*/
  }
  .supper img {
    width:100%;
    height: 1rem;
    /*border-radius: 0.15rem;*/
  }
</style>
